<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>电影</title>
  <script>
    function validateSearch() {
      const keywordInput = document.querySelector('input[name="keyword"]');
      const keyword = keywordInput.value.trim();
      if (keyword === '') {
        alert('搜索关键词不能为空');
        keywordInput.focus();
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
<!-- 判断是否有用户信息 -->
<div>
  <th:block th:if="${username}">
    <h1>恭喜你，<a th:href="@{/userPage(username=${username})}" th:text="${username}"></a> 登录成功！</h1>
  </th:block>
  <th:block th:unless="${username}">
    <h1>你还未登录，请先登录。</h1>
    <a href="/login">前往登录页面</a>
  </th:block>
</div>
<!-- 判断是否有订单信息 -->
<div>
  <th:block th:if="${username}">
    <h1>点击查看订单，<a th:href="@{/userPage(username=${username})}" th:text="${username}"></a> </h1>
  </th:block>
  <th:block th:unless="${username}">
    <h1>你没有订单信息</h1>
    <a href="/login">前往登录页面</a>
  </th:block>
</div>
<!-- 搜索表单 -->
<form th:action="@{/search}" method="get" onsubmit="return validateSearch()">
  <input type="hidden" th:name="username" th:value="${username}">
  <input type="text" name="keyword" placeholder="输入关键词搜索">
  <input type="submit" value="搜索">
</form>
<!-- 如果已登录，显示电影列表和分页导航栏 -->
<h2>电影列表</h2>
<ul>
  <!-- 遍历电影列表，显示电影名字 -->
  <li th:each="movie : ${movies}">
    <a th:href="@{/movieInfo(mid=${movie.mid}, username=${username})}" th:text="${movie.mtitle}"></a>
  </li>
</ul>

<!-- 分页导航栏 -->
<div>
  <!-- 首页 -->
  <th:block th:if="${username != null}">
    <a th:href="@{/successPage(username=${username}, page=0, size=${pageSize})}">首页</a>
  </th:block>
  <th:block th:unless="${username != null}">
    <a th:href="@{/successPage(page=0, size=${pageSize})}">首页</a>
  </th:block>

  <!-- 上一页 -->
  <th:block th:if="${username != null and currentPage > 0}">
    <a th:href="@{/successPage(username=${username}, page=${currentPage - 1}, size=${pageSize})}">上一页</a>
  </th:block>
  <th:block th:if="${username == null and currentPage > 0}">
    <a th:href="@{/successPage(page=${currentPage - 1}, size=${pageSize})}">上一页</a>
  </th:block>

  <!-- 下一页 -->
  <th:block th:if="${username != null and currentPage < totalPages - 1}">
    <a th:href="@{/successPage(username=${username}, page=${currentPage + 1}, size=${pageSize})}">下一页</a>
  </th:block>
  <th:block th:if="${username == null and currentPage < totalPages - 1}">
    <a th:href="@{/successPage(page=${currentPage + 1}, size=${pageSize})}">下一页</a>
  </th:block>

  <!-- 末页 -->
  <th:block th:if="${username != null}">
    <a th:href="@{/successPage(username=${username}, page=${totalPages - 1}, size=${pageSize})}">末页</a>
  </th:block>
  <th:block th:unless="${username != null}">
    <a th:href="@{/successPage(page=${totalPages - 1}, size=${pageSize})}">末页</a>
  </th:block>

  <!-- 显示当前页和总页数 -->
  <span>当前页: <span th:text="${currentPage + 1}"></span> / 总页数: <span th:text="${totalPages}"></span></span>
  <form th:action="@{/successPage}" method="get">
    <th:block th:if="${username != null}">
      <input type="hidden" th:name="username" th:value="${username}">
    </th:block>
    <input type="hidden" th:name="size" th:value="${pageSize}">
    <label for="pageNumber">跳转到页数:</label>
    <input type="number" id="pageNumber" name="page" min="0" th:max="${totalPages - 1}" required>
    <input type="submit" value="跳转">
  </form>
</div>
</body>
</html>